<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>标签列表</title>
    <link rel="stylesheet" href="${base}/layui/css/layui.css">
    <link rel="stylesheet" href="${base}/awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${base}/css/formSelects-v4.css">
    <link rel="stylesheet" href="${base}/css/admin.css">
    <style>
    	.layui-bg-black{        width: 200px;height: 136px;margin-right: 30px;float: left;text-align: center;font-size: 33px;color: #000000!important;padding-top: 30px;}
    	.hide {display: none;}
    	.checkbox{display: inline-block;}
    	.layui-form-item{font-size: 18px;}
    	.width100 {width: 100px; margin-right: 30px;float: left;}
    	.width180 {width: 180px; margin-right: 20px;float: left;}
    	.layui-input { display: inline-block; }
    </style>
</head>
<body class="layui-layout-body" style="overflow:scroll;">
<#include "/common/left.flt">	
<div class="layui-main" style="position: absolute;left: 204px;top: 4px; width: calc(100% - 210px);" >
<fieldset class="layui-elem-field layui-field-title" >
  <legend>操作提示</legend>
</fieldset>
<div class="layui-form hide" id="discuss" style="padding-top:20px;padding-right:20px;">
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-block">
      <input name="name" id="name" placeholder="请输入名称" class="layui-input"/>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">父标签</label>
    <div class="layui-input-block">
	  <select name="parent_id" id="parent_id" >
        <option value="1">兴趣标签</option>
        <option value="2">性格标签</option>
        <option value="3">私密标签</option>
      </select>
    </div>
  </div>
   <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">匹配标签</label>
    <div class="layui-input-block">
	  <select xm-select="search-local" xm-select-search>
      	<#list list as one>
        <option value="${one.id}">${one.name}</option>
        </#list>
      </select>
    </div>
  </div>

  
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-block">
      <input name="sort" id="sort" value="0" class="layui-input" type="number"/>
    </div>
  </div>
</div>
<blockquote class="layui-elem-quote layui-quote-nm">
 	<button class="layui-btn" id="add"> <span class="fa fa-plus-square-o"></span> 新加</button>
</blockquote> 

<table class="layui-table" >
	<thead>
       <tr>
            <th>标签id</th>
            <th>父标签</th>
            <th>名称</th>
            <th>匹配标签</th>
            <th>排序</th>
            <th>操作</th>
        </tr>
     </thead>
     <tbody>
     <#list list as one>
     <tr>
     	<td><a onclick="edit(${one.id},'${one.parent_id?default('0')}','${one.name?default('')}','${one.sort?default('0')}','${one.matching?default('')}');" >${one.id}</a></td>
     	<td><#if one.parent_id lt 2>兴趣标签<#elseif one.parent_id lt 3>性格标签<#else>私密标签</#if></td>
     	<td>${one.name?default('')}</td>
     	<td>${one.matching_name?default('')}</td>
     	<td>${one.sort?default('')}</td>
     	<td><a onclick="del(${one.id});" ><span class="fa fa-trash"></span></a></td>
     </tr>
     </#list>
     </tbody>
</table>
<div id="pageDiv"></div>
<form action="${base}/util/uploadFile" method="post" name="uploadForm" enctype="multipart/form-data" id="uploadForm" class="hide" >
    <input name="pic" type="file" id="pic" class="hide"/>
</form>
</body>
<script src="${base}/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="${base}/layui/layui.all.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="${base}/js/jquery.form.js"></script>
<script src="${base}/js/formSelects-v4.min.js" type="text/javascript"></script>
<script type="text/javascript">
layui.use('form', function() {
    var form = layui.form;
    form.render('select');
});
var formSelects = layui.formSelects;
var id_ = 0;
function edit(id,parent_id,name,sort,matching){
	id_ = id;
	$("#parent_id").val(parent_id);
	
	layui.use('form', function() {
	    var form = layui.form;
	    form.render('select');
	});
	
	$("#name").val(name);
	$("#sort").val(sort);
	formSelects.render('search-local');
	if (matching){
		//var numbers = [];
		var matchingArray = matching.split(",");
		formSelects.value('search-local', matchingArray);
		
	}
	layer.open({
	    type: 1 ,
	    title: '修改标签', 
	    area: ['600px', '480px'],   //宽高
	    shade: 0.4,   //遮罩透明度
	    content: $("#discuss"),
	    btn: ['确定'], //按钮组
	    scrollbar: false ,//屏蔽浏览器滚动条
	    yes: function(index){
	    	var parent_id_1 = $("#parent_id").val();
	    	var name_1 = $("#name").val();
	    	var sort_1 = $("#sort").val();
	    	var matching1 = formSelects.value('search-local', 'valStr');
	    	if (name){
	    		$.post("${base}/tags/save",
				   		{"id":id,"parent_id":parent_id_1,"name":name_1,"sort":sort_1,"matching":matching1},function(data){ 
				   			layer.alert(data);
				   			$("#discuss").hide();
				   			window.location.reload();
				   		}
				 );
	    	}
	        layer.close(index);
	        
	        $("#discuss").hide();
	    },
		cancel: function(){
			$("#discuss").hide();        
	    }
	});
}

$("#add").click(function (){
	layer.open({
	    type: 1 ,
	    title: '新加标签', 
	    area: ['600px', '480px'],   //宽高
	    shade: 0.4,   //遮罩透明度
	    content: $("#discuss"),
	    btn: ['确定'], //按钮组
	    scrollbar: false ,//屏蔽浏览器滚动条
	    yes: function(index){
	    	var parent_id = $("#parent_id").val();
	    	var name = $("#name").val();
	    	var sort = $("#sort").val();
	    	if (name){
	    		$.post("${base}/tags/save",
				   		{"parent_id":parent_id,"name":name,"sort":sort},function(data){ 
				   			layer.alert(data);
				   			$("#discuss").hide();
				   			window.location.reload();
				   		}
				 );
	    	}
	        layer.close(index);
	        
	        $("#discuss").hide();
	    },
		cancel: function(){
			$("#discuss").hide();        
	    }
	});

});

function del(id){
	//询问框
	layer.confirm('确定要删除吗？', {
	  btn: ['确定'] //按钮
	}, function(){
		$.post("${base}/tags/del",
		   		{"id":id},function(data){ 
		   			layer.alert(data);
		   			window.location.reload();
		   		}
		    );  
	});
}

</script>
</html>